<template>
	<view class="noticeLayout">
		<view class="title">
			<view class="tag" v-if="detail.select">
				<uni-tag inverted text="置顶" type="error" />
			</view>
			<view class="font">{{detail.title}}</view>
		</view>
		<view class="info">
			<view class="item">{{detail.author}}</view>
			<view class="item">
				<uni-dateformat :date="Date.now()" format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>
			</view>
		</view>
		<view class="content">
			<rich-text :nodes="detail.content"></rich-text>
		</view>
		<view class="count">
			阅读 {{detail.view_count}}
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getWallNewsDetailApi
	} from '../../api/apis';
	import {
		ref
	} from 'vue';

	const detail = ref({})
	let noticeId
	onLoad(e => {
		noticeId = e.id
		if (e.name) {
			uni.setNavigationBarTitle({
				title: e.name
			})
		} else {
			uni.setNavigationBarTitle({
				title: '公告详情'
			})
		}
		getNoticeDetailData()
	})

	const getNoticeDetailData = () => {
		getWallNewsDetailApi({
			id: noticeId
		}).then(res => {
			detail.value = res.data
			console.log(res.data);
		})

	}
	/*
	article_status: 1
	author: "咸虾米"
	content: "<div><div><div><p><img src="https://mp-0cb878b7-99ec-44ea-8246-12b123304b05.cdn.bspapp.com/cloudstorage/69e3dd04-1bc0-4aaa-809c-e37cbb587d58.jpg" style="max-width:100%;" contenteditable="false"/></p><p>扫码关注“咸虾米圈子”微信公众号，分享最新的技术及动态。</p></div></div></div>"
	publish_date: 1697974214505
	select: true
	title: "欢迎关注咸虾米圈子公众号，获取UP主咸虾米最新动态。"
	view_count: 127972
	_id: "653507c6466d417a3718e94b"
	__proto__: Object
	*/
</script>

<style lang="scss" scoped>
	.noticeLayout {
		padding: 30rpx;

		.title {
			font-size: 40rpx;
			color: #111;
			line-height: 1.6em;
			padding-bottom: 30rpx;
			display: flex;

			.tag {
				transform: scale(0.8);
				transform-origin: left center;
				flex-shrink: 0;
			}

			.font {
				padding-left: 6rpx;
			}
		}

		.info {
			display: flex;
			align-items: center;
			color: #999;
			font-size: 28rpx;

			.item {
				padding-right: 20rpx;
			}
		}

		.content {
			padding: 50rpx 0;
		}

		.count {
			color: #999;
			font-size: 28rpx;
		}
	}
</style>